<template>
  <div class="container" @touchmove.prevent>
    <navbar
      :vaniconL="true"
      :vaniconR="true"
      :noRight="true"
      :noLeft="false"
      iconNameL="arrow-left"
      iconNameR="search"
      @clickLeft="goBaCK"
      >个人信息</navbar
    >

    <div class="set">
      <van-cell class="head" title="头像" is-link>
        <template #right-icon>
          <el-upload
            class="upload-demo"
            action="https://ds.pushiyixue.com/ds/upload/wx_appsimage"
            accept="image/*"
            :show-file-list="false"
            :data="updata"
            :on-success="upsuccess"
            :on-error="uperror"
            :limit="1"
          >
            <img
              class="headimg"
              :src="
                mydata.headImage
                  ? mydata.headImage
                  : require('@/assets/images/mine1.png')
              "
              alt=""
            />
            <van-icon name="arrow" size="0.16rem" color="#969799" />
          </el-upload>
        </template>
      </van-cell>
      <van-cell title="用户名" :value="mydata ? mydata.userName : '暂无'" />
      <van-cell title="手机号" :value="mydata ? mydata.phone : '暂无'" />
      <van-cell
        title="昵称"
        is-link
        @click="enterFlag = true"
        :value="mydata ? mydata.nickName : '暂无'"
      />
      <van-cell
        title="性别"
        @click="sexShow"
        is-link
        :value="mydata.sex == 1 ? '男' : mydata.sex == 2 ? '女' : '暂无'"
      />
      <van-cell
        title="年龄"
        @click="ageFlag = true"
        is-link
        :value="mydata ? mydata.age : '暂无'"
      />
    </div>
    <van-button type="primary" @click="submitMes" color="#4775d9" block
      >确定</van-button
    >
    <transition name="van-slide-up">
      <van-picker
        v-show="sexflag"
        title="性别"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
    /></transition>
    <van-popup
      v-model="enterFlag"
      :style="{ height: '40%' }"
      position="bottom"
      closeable
    >
      <van-field
        style="margin-top: 0.5rem"
        v-model="changeName"
        label="昵称"
        placeholder="请输入昵称"
        maxlength="10"
      />
      <van-button type="primary" @click="changeNick" color="#4775d9" block
        >确定</van-button
      >
    </van-popup>
    <van-popup
      v-model="ageFlag"
      :style="{ height: '40%' }"
      position="bottom"
      closeable
    >
      <van-field
        style="margin-top: 0.5rem"
        v-model="changeAge"
        label="年龄"
        placeholder="请输入年龄"
        maxlength="3"
        type="number"
      />
      <van-button type="primary" @click="changeAgefun" color="#4775d9" block
        >确定</van-button
      >
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import navbar from "@/components/navbar";
import { getUserShareOption, saveUserShareOption } from "@/api/share";
import { appUpdateUser } from "@/api/home";
import { mapGetters } from "vuex";
import { setStorage } from "@/utils/auth";
export default {
  name: "person",
  components: { navbar },
  data() {
    return {
      radio: "30",
      pradio: "2",
      value: "",
      showKeyboard: true,
      needFlag: false,
      hideFlag: false,
      mydata: null,
      headimg: null,
      updata: {
        phone: null,
      },
      sexflag: false,
      columns: ["男", "女"],
      enterFlag: false,
      ageFlag: false,
      changeName: "",
      changeAge: "",
    };
  },
  computed: {
    ...mapGetters(["userData"]),
  },
  watch: {},
  methods: {
    // 返回上一页
    goBaCK() {
      this.$router.go(-1);
    },
    async submitMes() {
      let data = this.mydata;
      let res = await appUpdateUser(
        data.userName,
        data.headImage ? data.headImage : "",
        data.nickName ? data.nickName : "",
        data.sex,
        data.age
      );
      console.log(res);
      if (res.data.status == 200) {
        Toast.success("修改成功");
        setStorage("userInfo", JSON.stringify(data));
        this.$store.dispatch("user/commitSaveData", JSON.stringify(data));
      }
    },
    upsuccess(response, file, fileList) {
      console.log(response, file, fileList);
      Toast.success("上传成功");
      this.mydata.headImage = response.data.image;
      console.log(this.mydata.headImage);
    },
    uperror(err, file, fileList) {
      Toast.fail("上传失败");
      console.log(err, file, fileList);
    },
    sexShow() {
      this.sexflag = true;
    },
    onConfirm(value, index) {
      console.log(index);
      this.mydata.sex = index + 1;
      this.sexflag = false;
    },
    onCancel() {
      this.sexflag = false;
    },
    changeNick() {
      this.mydata.nickName = this.changeName;
      this.enterFlag = false;
    },
    changeAgefun() {
      this.mydata.age = this.changeAge;
      this.ageFlag = false;
    },
  },
  async created() {
    this.mydata = JSON.parse(this.userData);
    this.updata.phone = this.mydata.phone;
    Toast.setDefaultOptions({ duration: 500 });
    Toast.loading({
      message: this.$t("detailList.loading"),
      forbidClick: true,
      overlay: true,
    });
  },
  mounted() {},
  destroyed() {},
};
</script>
<style lang='scss' scoped>
.container {
  position: relative;
  height: 100vh;
  background: #f5f5f5;
  & .set {
    width: 100%;
    background: #fff;
    margin: auto;
    margin-top: 10px;
    border-radius: 10px;
    // padding-bottom: 15px;
    & .head {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    & .headimg {
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
    }
    & /deep/ .el-upload {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
  & .van-button {
    width: 94%;
    margin: auto;
    margin-top: 0.2rem;
  }
  & .van-password-input {
    margin-top: 0.1rem;
  }
}
.van-cell__title {
  text-align: left;
}
</style>